/**
 * @since : 2018/3/26 下午3:16
 * @author : fupeng
 */

import React from 'react';
import User from 'service/user.jsx';
import Mutil from 'util/mm.jsx';

import './index.scss';

const _user = new User();

class Login extends React.Component {

    constructor() {
        super();
        this.state = {
            username: '',
            password: '',
            redirect: Mutil.getParamFromUrl('redirect') || '/'
        }
    }

    onInputChange(e) {
        let inputName = e.target.name;
        let inputValue = e.target.value;
        this.setState({
            [inputName]: inputValue
        })
    }

    onSubmit() {
        const userInfo = {
            username: this.state.username,
            password: this.state.password
        };
        let result = _user.checkUserInfo(userInfo);
        if (result.status) {
            _user.login(userInfo).then(res => {
                Mutil.setLocalStorage('userInfo', res)
                this.props.history.push(this.state.redirect)
            }, err => {
                Mutil.errorTips(err);
            });
        } else {
            Mutil.errorTips(result.msg);
        }

    }

    onKeyUp(e) {
        if (e.keyCode === 13) {
            this.onSubmit();
        }
    }

    render() {
        return (
            <div className="panel panel-default col-lg-4 col-lg-offset-4 login-panel">
                <div className="panel-heading">后台管理系统</div>
                <div className="panel-body">
                    <div className="form-horizontal">
                        <div className="form-group">
                            <div className="col-sm-12">
                                <input type="text"
                                       name="username"
                                       className="form-control"
                                       placeholder="username"
                                       onChange={e => this.onInputChange(e)}
                                       onKeyUp={e => this.onKeyUp(e)}
                                />
                            </div>
                        </div>
                        <div className="form-group">
                            <div className="col-sm-12">
                                <input type="password"
                                       name="password"
                                       className="form-control"
                                       placeholder="Password"
                                       onChange={e => this.onInputChange(e)}
                                       onKeyUp={e => this.onKeyUp(e)}
                                />
                            </div>
                        </div>
                        <div className="form-group">
                            <div className="col-sm-12">
                                <button className="btn btn-primary btn-block"
                                        onClick={e => {this.onSubmit(e)}}
                                >登录
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Login;